<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header" :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
      <image @click="gomine" src="../../static/images/homeview.png" mode="aspectFill" style="width: 84rpx; height: 84rpx; margin-right: 194rpx"></image>
      <view>虎云代驾</view>
      <view></view>
    </view>
    <!--头部图片 -->
    <swiper class="swiper" circular :autoplay="true" :interval="2000" style="width: 100%; height: 216rpx" :style="{ 'padding-top': navheight + 5 + 'px' }">
      <swiper-item v-for="item in swiperlist" :key="item.id">
        <image :src="imgurl + item.image" mode="aspectFill" style="width: 100%; height: 100%; display: block"></image>
      </swiper-item>
      <!-- <swiper-item>
        <image src="../../static/images/logo.png" mode="aspectFill" style="width: 100%; height: 100%; display: block"></image>
      </swiper-item> -->
    </swiper>
    <!-- <image src="../../static/images/indexbgc.png" mode="aspectFill" style="width: 100%; height: 216rpx; display: block" :style="{ 'padding-top': navheight + 5 + 'px' }"></image> -->
    <!-- 地图 -->
    <map style="width: 100%; height: 528rpx" :scale="scale" :markers="covers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-view class="content">{{ item.title }}</cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
    <!-- 进行中的订单 -->
    <cover-view style="position: fixed; top: 830rpx; left: 0rpx; width: 100%; height: 70rpx; padding-left: 30rpx; box-sizing: border-box">
      <cover-view
        style="
          width: 208rpx;
          height: 68rpx;
          background: #ebf2ff;
          border-radius: 36rpx 36rpx 36rpx 36rpx;
          text-align: center;
          line-height: 68rpx;
          margin-right: 32rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #3376f7;
        "
        v-for="(item, index) in doinglist"
        :key="item.id"
        @click="godetail(item)"
      >
        进行中的订单
      </cover-view>
    </cover-view>
    <!-- <image src="../../static/images/indexposition.png" mode="aspectFill" style="width: 64rpx; height: 64rpx; position: fixed; right: 10rpx; top: 750rpx"></image> -->
    <!-- 选择地点 -->
    <view class="address" id="choose" :style="{ height: addresshieght + 'px' }">
      <view class="son">
        <view class="sontab">
          <view class="sontableft">
            <image src="../../static/images/indextab.png" mode="aspectFill" style="width: 61%; height: 110rpx"></image>
            <view style="position: absolute; top: 33%; left: 15%; font-weight: bold; font-size: 30rpx; color: #3483f6">呼叫代驾</view>
          </view>
          <view @click="wxscan" style="position: absolute; top: 33%; right: 20%; font-size: 30rpx; color: #2e3148">扫司机</view>
        </view>
        <view class="sonbox">
          <!-- 起点 -->
          <view style="display: flex; align-items: center; width: 592rpx; height: 104rpx; padding-left: 20rpx" @click="gostartaddress">
            <view style="width: 16rpx; height: 16rpx; background: #32b499; border-radius: 50%; margin-right: 24rpx"></view>
            <view style="width: 500rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden">
              从
              <text style="color: #32b499; padding: 0 10rpx">{{ startaddress }}</text>
              出发
            </view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
          <!-- 终点 -->
          <view
            @click="goendaddress"
            style="
              display: flex;
              align-items: center;
              margin-top: 20rpx;
              width: 592rpx;
              height: 104rpx;
              background: #f3f3f3;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              padding-left: 20rpx;
            "
          >
            <view style="width: 16rpx; height: 16rpx; background: #f30021; border-radius: 50%; margin-right: 24rpx"></view>
            <view style="width: 500rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden">
              <text v-if="endaddress" style="color: #32b499; padding: 0 10rpx">{{ endaddress }}</text>
              <text v-else>输入您的目的地</text>
            </view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
          <!-- 替朋友代驾 -->
          <view @click="gotofirends" style="display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 30rpx; color: #222222; margin-top: 50rpx">
            <view>{{ phone ? phone : '替朋友叫代驾' }}</view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
          <view class="btn" @click="gonext">创建订单</view>
        </view>
      </view>
    </view>
    <!-- <view class="address" id="choose"></view> -->
  </view>
</template>

<script>
import { qqmap } from '@/utils/qqmap.js';
export default {
  onShareTimeline() {
    return {
      title: '虎云代驾',
      imageUrl: '/static/images/logo.png'
      //分享朋友圈的参数
    };
  },
  onShareAppMessage() {
    return {
      title: '虎云代驾',
      imageUrl: '/static/images/logo.png'
    };
  },
  data() {
    return {
      imgurl: '',
      navheight: 0, // 导航栏高度
      hometop: 0, // 顶部的距离
      addresshieght: 0, // 地址选择的盒子
      startaddress: '', // 起点
      endaddress: '', // 终点
      phone: '',
      // 地图的数据
      latitude: 39.909,
      longitude: 116.39742,
      covers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        },
        {
          id: 2,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/end.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        }
      ],
      scale: 12,
      swiperlist: [], // 轮播图
      doinglist: [] // 进行中的订单
    };
  },

  methods: {
    // 跳转到进行中的订单
    godetail(item) {
      if (item.status == 2) {
        //待接单
        uni.navigateTo({
          url: '/order/callorderdetail/callorderdetail?orderid=' + item.id
        });
      } else if (item.status == 3) {
        // 司机已接单
        uni.navigateTo({
          url: '/order/reciveorder/reciveorder?orderid=' + item.id
        });
      } else if (item.status == 4) {
        // 司机到达起点
        uni.navigateTo({
          url: '/order/arriverstart/arriverstart?orderid=' + item.id
        });
      } else if (item.status == 5) {
        //行程中
        uni.navigateTo({
          url: '/order/goend/goend?orderid=' + item.id
        });
      }
    },
    //获取订单列表
    async getorderlist() {
      this.doinglist = [];
      const res = await this.http('/order/list', {
        page: 1
      });
      console.log('进行中的订单', res.data.list);
      res.data.list.forEach((item) => {
        if (item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5) {
          if (this.doinglist.length == 2) {
            return;
          } else {
            this.doinglist.push(item);
          }
        }
      });
    },
    // 获取轮播图
    async getswiper() {
      const res = await this.http('/index/banner');
      console.log('轮播图', res);
      this.swiperlist = res.data;
    },
    // 创建订单
    gonext() {
      uni.navigateTo({
        url: '/pages/confirmorder/confirmorder'
      });
    },
    //扫一扫
    wxscan() {
      uni.scanCode({
        scanType: ['qrCode'],
        hideAlbum: true,
        success: (res) => {
          console.log('条码类型：' + res.scanType);
          // console.log('条码内容：' + res.path);
          console.log('司机id', res.result);
          // const url = decodeURIComponent(res.path).split('?');
          // console.log(url[0] + '?' + url[url.length - 1]);
          uni.redirectTo({
            url: '/pages/scandriver/scandriver?driverid=' + res.result
          });
        },
        fail: (res) => {
          console.log('错误信息', res);
          uni.showToast({
            title: '扫码失败'
          });
        }
      });
    },
    // 跳转到个人中心
    gomine() {
      uni.navigateTo({
        url: '/mine/mine/mine'
      });
    },
    // 跳转到起点
    gostartaddress() {
      uni.navigateTo({
        url: '/pages/startaddress/startaddress'
      });
    },
    // 跳转到终点
    goendaddress() {
      uni.navigateTo({
        url: '/pages/endaddress/endaddress'
      });
    },
    // 跳转到朋友代驾
    gotofirends() {
      uni.navigateTo({
        url: '/pages/changeprople/changeprople'
      });
    }
  },
  onLoad(opt) {
    this.imgurl = this.img;
    this.getswiper();

    // console.log(opt);
    if (decodeURIComponent(opt.scene)) {
      const arr = decodeURIComponent(opt.scene).split('=');
      console.log('userid', arr[arr.length - 1]);
      console.log('type', arr[1]);
      uni.setStorageSync('userid', arr[arr.length - 1]);
      uni.setStorageSync('type', arr[1]);
    }
    if (opt.phone) {
      if (opt.phone == '自己') {
        uni.setStorageSync('firendphone', '');
      } else {
        uni.setStorageSync('firendphone', opt.phone);
        this.phone = opt.phone;
      }
    }
    // 获取用户当前位置
    this.$nextTick(() => {
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        accuracy: 'best',
        success: (res) => {
          // console.log('当前位置的经度：' + res.longitude);
          // console.log('当前位置的纬度：' + res.latitude);
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.covers[0].latitude = res.latitude;
          this.covers[0].longitude = res.longitude;
          console.log(this.covers.latitude, this.covers.longitude);
          //地址解析
          qqmap.reverseGeocoder({
            location: {
              latitude: this.latitude,
              longitude: this.longitude
            },
            success: (res) => {
              // console.log(uni.getStorageSync('startaddress'));
              console.log(res.result.address_component.city);
              uni.setStorageSync('currentcity', res.result.address_component.city);
              console.log('地址解析', res.result.address_reference.landmark_l2);
              uni.setStorageSync('startaddress', res.result.address_reference.landmark_l2);
              this.startaddress = uni.getStorageSync('startaddress').title;
              this.covers[0].title = res.result.address_reference.landmark_l2.title;
            }
          });
        }
      });
    });

    // 导航栏的高度
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  onShow() {
    if (uni.getStorageSync('token')) {
      this.getorderlist();
    }
    if (uni.getStorageSync('startaddress')) {
      this.$nextTick(() => {
        this.latitude = uni.getStorageSync('startaddress').location.lat;
        this.longitude = uni.getStorageSync('startaddress').location.lng;
        this.startaddress = uni.getStorageSync('startaddress').title;
        this.covers[0].title = uni.getStorageSync('startaddress').title;
        this.covers[0].latitude = uni.getStorageSync('startaddress').location.lat;
        this.covers[0].longitude = uni.getStorageSync('startaddress').location.lng;
      });
    }
    if (uni.getStorageSync('endaddress')) {
      this.$nextTick(() => {
        this.endaddress = uni.getStorageSync('endaddress').title;
        this.covers[1].title = uni.getStorageSync('endaddress').title;
        this.covers[1].latitude = uni.getStorageSync('endaddress').location.lat;
        this.covers[1].longitude = uni.getStorageSync('endaddress').location.lng;
        this.scale = 11;
      });
    }
    // 获取剩余的高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#choose')
          .boundingClientRect((data) => {
            this.addresshieght = e.screenHeight - data.top - this.navheight;
            console.log('节点离页面顶部的距离为' + this.addresshieght);
          })
          .exec();
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.customCallout {
  box-sizing: border-box;
  background-color: #32b499;

  border-radius: 30rpx;
  display: inline-flex;
  padding: 6rpx 24rpx;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.container {
  box-sizing: border-box;
  .header {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    align-items: center;
    padding-left: 26rpx;
    background-color: #fff;
    // justify-content: space-between;
  }
  .address {
    box-sizing: border-box;
    width: 100%;
    // height: 704rpx;
    background: linear-gradient(180deg, #3376f7, 40%, #ededed);
    padding: 52rpx 28rpx 0 28rpx;
    border-radius: 30rpx 30rpx 0 0;
    .son {
      width: 694rpx;
      height: 700rpx;
      border-radius: 40rpx;
      overflow: hidden;
      .sontab {
        position: relative;
        top: 0;
        left: 0;
        // display: flex;
        // align-items: center;
        width: 100%;
        height: 110rpx;
        background-color: #e7e9f6;
        .sontableft {
          position: relative;
          top: 0;
          left: 0;
        }
      }
      .sonbox {
        box-sizing: border-box;
        width: 100%;
        height: 562rpx;
        background-color: #fff;
        padding: 60rpx 52rpx;
      }
    }
  }
  .btn {
    width: 600rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    background: #3483f6;
    margin-top: 20rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
